<template>
  <div class="wrapper">
    <swiper :options="swiperOption" >
       <!-- slides -->
       <swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" :src="item.imgUrl" /></swiper-slide>

       <!-- Optional controls -->
       <div class="swiper-pagination"  slot="pagination"></div>

    </swiper>
  </div>
</template>

<script>
  export default{
    name: 'HomeSwiper',
     data() {
           return {
              swiperOption: {
                // swiper options 所有的配置同swiper官方api配置
                autoplay: 2000,
                pagination: '.swiper-pagination',
                paginationClickable: true,
                mousewheelControl: true,
                loop: true
              },
              swiperList:[
                 {
                   id: '0001',
                   imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vcimg/6ff121fd416169b8d56c60384e3baf79.jpeg'
                 },
                 {
                   id: '0002',
                   imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vcimg/f7813c9431796cc32ae7b7a78447342e.jpeg'
                 },
                 {
                   id: '0003',
                   imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vcimg/569cae4ae98e9793f7341e85eed73c54.jpeg'
                 },
                 {
                   id: '0004',
                   imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vcimg/f03f5ac90ae59d0d9c6332a2bfd9782e.jpeg'
                 }
              ]
              }
           }
  }
</script>

<style lang="stylus" scoped>
  // css穿透
  .wrapper >>> .swiper-pagination-bullet-active
    background: #FFFFFF
  // 撑开轮播图
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 30.5%
    background: #eee
    .swiper-img
      width: 100%
</style>
